import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';
import '../../widget/text/text_widget.dart';
import 'running_water_logic.dart';

class RunningWaterPage extends StatefulWidget {
  const RunningWaterPage({Key? key}) : super(key: key);

  @override
  State<RunningWaterPage> createState() => RunningWaterPageState();
}

class RunningWaterPageState extends State<RunningWaterPage> {
  final logic = Get.put(RunningWaterLogic());
  final state = Get.find<RunningWaterLogic>().state;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: const Color(0xFFFFFFFF),
      body: Column(
        children: [
          SizedBox(height: ScreenUtil().statusBarHeight),
          Padding(
              padding: EdgeInsets.only(left: 2.w),
              child: Image.asset("assets/images/navigation.png",
                  width:  ScreenUtil().screenWidth, height: 64.w, fit: BoxFit.contain)),
          Container(
            padding: EdgeInsets.only(left: 15.w,right: 10.w),
            color: Colors.white,
            height: 60.w,
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
              Row(
                children: [
                  Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      TextWidget(
                          "23/05/27",
                          TextStyle(
                              color: const Color(0xFFFF0000),
                              fontSize: 14.sp,
                              fontWeight: FontWeight.w500)),
                      TextWidget(
                          "24/05/26",
                          TextStyle(
                              color: const Color(0xFFFF0000),
                              fontSize: 14.sp,
                              fontWeight: FontWeight.w500)),
                    ],
                  ),
                  Padding(
                      padding: EdgeInsets.only(left: 2.w),
                      child: Image.asset("assets/images/pull.png",
                          width: 15.w, height: 15.w, fit: BoxFit.contain)),

                ],
              ),
              Row(
                children: [
                  Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      TextWidget(
                          "分类",
                          TextStyle(
                              color: const Color(0xFF717171),
                              fontSize: 14.sp,
                              fontWeight: FontWeight.w400))
                    ],
                  ),
                  Padding(
                      padding: EdgeInsets.only(left: 2.w),
                      child: Image.asset("assets/images/pull.png",
                          width: 15.w, height: 15.w, fit: BoxFit.contain)),

                ],
              ),
                  Row(
                    children: [
                      Column(
                        mainAxisAlignment: MainAxisAlignment.center,
                        children: [
                          TextWidget(
                              "全部卡",
                              TextStyle(
                                  color: const Color(0xFF717171),
                                  fontSize: 14.sp,
                                  fontWeight: FontWeight.w400))
                        ],
                      ),
                      Padding(
                          padding: EdgeInsets.only(left: 2.w),
                          child: Image.asset("assets/images/pull.png",
                              width: 15.w, height: 15.w, fit: BoxFit.contain)),

                    ],
                  ),
                  Row(
                    children: [
                      Column(
                        mainAxisAlignment: MainAxisAlignment.center,
                        children: [
                          TextWidget(
                              "人民币",
                              TextStyle(
                                  color: const Color(0xFF717171),
                                  fontSize: 14.sp,
                                  fontWeight: FontWeight.w400))
                        ],
                      ),
                      Padding(
                          padding: EdgeInsets.only(left: 2.w),
                          child: Image.asset("assets/images/pull.png",
                              width: 15.w, height: 15.w, fit: BoxFit.contain)),

                    ],
                  )
            ]),
          ),
          Expanded(
              child: ListView.builder(
                padding: EdgeInsets.zero,
                  shrinkWrap: true, //列表的高度是否根据内容自动设定
                  scrollDirection: Axis.vertical, //列表滑动方向
                  itemCount: state.countryList.length, //item总个数
                  itemBuilder: (BuildContext context, int index) {
                    //每个item的布局
                    String date = state.countryList[index]["date"];
                    String outflow = state.countryList[index]["outflow"];
                    String dateDesc = state.countryList[index]["dateDesc"];
                    String balance = state.countryList[index]["balance"];
                    return buildItemWidget(date, outflow, dateDesc, balance);
                  }))
        ],
      ),
    );
  }

  /// 构建item布局组件
  Widget buildItemWidget(
      String date, String outflow, String dateDesc, String balance) {
    return Column(
      children: [
        Container(
          color: const Color(0xFFF8F8F8),
          padding: EdgeInsets.symmetric(horizontal: 20.w),
          height: 60.w,
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              TextWidget(
                  date,
                  TextStyle(
                      color: const Color(0xFF9D9D9D),
                      fontSize: 14.sp,
                      fontWeight: FontWeight.w400)),
              Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  TextWidget(
                      "流入平安卡：$outflow",
                      TextStyle(
                          color: const Color(0xFF9D9D9D),
                          fontSize: 13.sp,
                          fontWeight: FontWeight.w400)),
                  TextWidget(
                      "流出平安卡：0.00",
                      TextStyle(
                          color: const Color(0xFF9D9D9D),
                          fontSize: 13.sp,
                          fontWeight: FontWeight.w400))
                ],
              )
            ],
          ),
        ),
        Container(
          color: Colors.white,
          padding: EdgeInsets.symmetric(horizontal: 16.w, vertical: 10.w),
          child: Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              /// 显示本地图片
              Padding(
                  padding: EdgeInsets.only(left: 5.w),
                  child: Image.asset("assets/images/running_water.png",
                      width: 40.w, height: 40.w, fit: BoxFit.contain)),
              SizedBox(width: 15.w),
              Expanded(
                  child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: [
                      TextWidget(
                          "工资",
                          TextStyle(
                              color: const Color(0xFF1D2129),
                              fontSize: 17.sp,
                              fontWeight: FontWeight.w500)),
                      TextWidget(
                          "+$outflow",
                          TextStyle(
                              color: const Color(0xFFFF0000),
                              fontSize: 18.sp,
                              fontWeight: FontWeight.w500)),
                    ],
                  ),
                  SizedBox(height: 5.w),
                  Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: [
                      TextWidget(
                          "收入-工资 储蓄卡3764",
                          TextStyle(
                              color: const Color(0xFF9D9D9D),
                              fontSize: 14.sp,
                              fontWeight: FontWeight.w400)),
                      TextWidget(
                          "余额$balance",
                          TextStyle(
                              color: const Color(0xFF9D9D9D),
                              fontSize: 13.sp,
                              fontWeight: FontWeight.w400)),
                    ],
                  ),
                  SizedBox(height: 5.w),
                  TextWidget(
                      dateDesc,
                      TextStyle(
                          color: const Color(0xFF9D9D9D),
                          fontSize: 13.sp,
                          fontWeight: FontWeight.w400)),
                ],
              ))
            ],
          ),
        )
      ],
    );
  }
}
